<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="16">
                <div class="grid-content-left">
                    <el-row>
                        <el-col :span="5" v-for="(item, index) in musicList.slice(0,4)"
                                :key="index"
                                :offset="index >0 ? 1 : 0">
                            <el-card :body-style="{ padding: '0px' }">
                                <div class="imgs">
                                    <img :src="item.picUrl" class="image" alt="">
                                    <el-image :src="src" @click="clickListCard(item.id)"></el-image>
                                </div>
                                <div style="padding: 5px;height: 64px">
                                    <span>{{item.name}}</span>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="5" v-for="(item, index) in musicList.slice(4,8)"
                                :key="index"
                                :offset="index >0 ? 1 : 0">
                            <el-card :body-style="{ padding: '0px' }">
                                <div class="imgs">
                                    <img :src="item.picUrl" class="image" alt="">
                                    <el-image :src="src" @click="clickListCard(item.id)"></el-image>
                                </div>
                                <div style="padding: 5px;height: 64px">
                                    <span>{{item.name}}</span>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-col>

            <el-col :span="8">
                <div class="grid-content-right">
                    <div class="main" v-for="(item1, index) in officialListDetail" :key="index">
                        <el-card shadow="hover"
                                 :body-style="{ padding: '0px',display: 'flex',}">
                            <div class="bang-left">
                                <img :src="item1.coverImgUrl" class="image1" @click="clickListCard(item1.id)">
                            </div>
                            <div class="bang-right">
                                <div class="title1">{{item1.name}}</div>
                                <table>
                                    <tr
                                            class="listRows"
                                            v-for="(item2, index) in (item1.tracks &&(item1.tracks).slice(0, 2))
                                                ||(item1.topSongs && (item1.isOpen? item1.topSongs: (item1.topSongs).slice(0, 3)))
                                                ||(item1.songs).slice(0, 3)"
                                            :key="index">
                                        <td class="index">{{ index + 1 }}. </td>
                                        <td class="musicName">{{ item2.name }}</td>
                                        <td class="singer">- {{ item2.ar[0].name }}</td>
                                    </tr>
                                </table>
                            </div>
                        </el-card>
                    </div>
                </div>
            </el-col>

        </el-row>
    </div>
</template>

<script>
    export default {
        props: {
            musicList: {
                type: Array,
                default() {
                    return []
                }
            },
            officialListDetail: {
                type: Array,
                default() {
                    return []
                }
            },
        },
        name: "Box1",
        data() {
            return {
                desc: [
                    {id: 1, text: "乡村音"},
                    {id: 2, text: "乡村音"},
                    {id: 3, text: "乡村音"},
                    {id: 4, text: "乡村音"}
                ],
                src: require('./../../img/YlnqK6Ow3X.png')
            }
        },
        methods: {
            clickListCard(id) {
                console.log(id);
                this.$emit("clickListCardItem", id);
            },
        }
    }
</script>

<style scoped>
    /deep/ [class*=el-col-] {
        margin-bottom: 10px;
    }

    .image {
        width: 100%;
        height: 100%;
        display: block;
        cursor:pointer
    }

    .image1 {
        width: 90px;
        height: 90px;
        cursor:pointer
    }

    .grid-content-left span {
        font-size: 0.5em;
        height: 64px;
    }

    .grid-content-left .el-row {
        margin: 10px 0 40px 5px;
    }
    .grid-content-right .main{

        margin-bottom: 20px;
    }
    .grid-content-right{
        padding-top: 10px;
    }
    /deep/ .grid-content-right .el-card__body{
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .grid-content-right .bang-right{
        display: flex;
        flex-direction: column;
        margin-left: 10px;
    }

    .imgs {
        position: relative;
        width: 100%;
    }

    .imgs .el-image {
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 80px;
        opacity: 0;
        /*开始透明度为0*/
        transition: opacity 1s;
    }

    .imgs:hover .el-image {
        opacity: 1;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        border-radius: 5px;
        overflow: hidden;
    }

    .listRows {
        height: 30px;
        font-size: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
    }

    .listRows td {
        transform: scale(0.9);
    }
    .listRows td:nth-child(3){
        color: #9d9d9d;

    }
</style>